<template>
  <div class="exhibition-box">
    <slot></slot>
  </div>
</template>

<script>
  export default {
    name: 'exhibition-box',
    model: {
      prop: 'current',
      event: 'on-change'
    },
    props: {
      current: [Number, String],
      default: 0,
    },
    data() {
      return {
        currentIndex: 0,
        slotLength: 0,
      }

    },
    mounted() {
      this.initIndex(this.currentIndex);
    },
    watch: {
      currentIndex: function (val, oldV) {
        this.initIndex(val);
        this.$emit('on-change', val);
      }
    },
    methods: {
      initIndex(showIndex) {
        let slots = this.$slots.default.filter((item) => {
          return item.tag !== undefined;
        })
        this.slotLength = slots.length;
        slots.forEach((item, index) => {
          if (!item.tag) {
            return;
          }
          item.child.position = 2;
          if (index === showIndex) {
            item.child.position = 0;
          } else if ((index - 1 + slots.length) % slots.length === showIndex) {
            item.child.position = 3;
          } else if ((index + 1) % slots.length === showIndex) {
            item.child.position = 1;
          }
        })
      },
      next() {
        this.currentIndex = (this.currentIndex + 1) % this.slotLength;
      },
      pre() {
        this.currentIndex = (this.currentIndex - 1 + this.slotLength) % this.slotLength;
      }
    }
  }
</script>

<style lang="less">
  .exhibition-box {
    position: relative;
    width: 100vw;
    height: 100vh;
  }
</style>
